<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>登录</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="format-detection" content="telephone=no"/>

    <link rel="shortcut icon" type="image/x-icon" href="../static/images/favicon/favicon.ico"
          th:href="@{/images/favicon/favicon.ico}"/>
    <link rel="stylesheet" type="text/css" href="../static/css/login.css"
          th:href="@{/css/login.css}"/>
    <link rel="stylesheet" type="text/css" href="../static/plugins/layui/css/layui.css"
          th:href="@{/plugins/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" type="text/css" href="../static/css/global.css"
          th:href="@{/css/global.css}" media="all"/>
    <link rel="stylesheet" type="text/css" href="../static/plugins/font-awesome-4.7.0/css/font-awesome.css"
          th:href="@{/plugins/font-awesome-4.7.0/css/font-awesome.css}"/>
</head>

<body class="beg-login-bg">
<div class="beg-login-box">
    <header>
        <h1>后台登录</h1>
    </header>
    <div class="beg-login-main">
        <form action="/login" th:action="@{/login}" class="layui-form" method="post" th:method="post">

            <div class="layui-form-item">
                <label class="beg-login-icon">
                    <i class="layui-icon">&#xe612;</i>
                </label>
                <input type="text" name="username" lay-verify="username" autocomplete="off" placeholder="这里输入登录名"
                       class="layui-input"/>
            </div>
            <div class="layui-form-item">
                <label class="beg-login-icon">
                    <i class="layui-icon">&#xe642;</i>
                </label>
                <input type="password" name="password" lay-verify="password" autocomplete="off" placeholder="这里输入密码"
                       class="layui-input"/>
            </div>
            <div class="layui-form-item">
                <div class="beg-pull-left beg-login-remember">
                    <label>记住帐号？</label>
                    <input type="checkbox" name="rememberMe" value="true" lay-skin="switch" checked title="记住帐号"/>
                </div>
                <div class="beg-pull-right">
                    <button class="layui-btn layui-btn-primary" lay-submit lay-filter="login">
                        <i class="layui-icon">&#xe650;</i> 登录
                    </button>
                </div>
                <h3 style="color: red" id="errmsg" th:text="${message}"></h3>
                <div class="beg-clear"></div>
            </div>
        </form>
    </div>
    <footer>
        <p>2017 &copy;
            <a href="http://ceos.sinoair.com/">跨境出口操作平台</a> LGPL license
        </p>
    </footer>
</div>

<script type="text/javascript" th:src="@{/plugins/layui/layui.js}" src="../static/plugins/layui/layui.js"></script>
<script>
    layui.use(['layer', 'form'], function () {
        var layer = layui.layer,
            $ = layui.jquery,
            form = layui.form;

//        form.on('submit(login)', function (data) {
//            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
//            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
//            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
//
//            var username = data.field.username;
//            var password = data.field.password;
//
//            $.post("/login", {
//                "username": username,
//                "password": password,
//                "rememberMe": true
//            }, function (result) {
//                if (result.status == 200) {
//                    location.href = "/index";
//                } else {
//                    $("#errmsg").html(result.message);
//                }
//            });
//
//
////            location.href = 'index.html';
//            return false;
//        });
    });
</script>

</body>

</html>